<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>简易学生成绩管理系统</title>
	<link rel="stylesheet" href="/Sys/css/layui.css">
	<link rel="stylesheet" href="/Sys/css/sign.css">
	<link rel="stylesheet" href="/Sys/js/css/modules/layui-icon-extend/iconfont.css">
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="/Sys/css/font.css">
	<link rel="stylesheet" href="/Sys/css/xadmin.css">
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
	<style>
		body.layui-unselect.lau-sign-body {
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			margin: 0;
			padding: 0;
			position: relative;
			overflow: hidden;
			font-family: 'Noto Sans SC', sans-serif;
		}

		/* 新的背景装饰元素 - 更现代的设计 */
		body.layui-unselect.lau-sign-body::before {
			content: "";
			position: absolute;
			width: 600px;
			height: 600px;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(95, 184, 120, 0.15) 0%, rgba(255,255,255,0) 70%);
			top: -300px;
			right: -300px;
			z-index: 0;
			animation: float 8s ease-in-out infinite;
		}

		body.layui-unselect.lau-sign-body::after {
			content: "";
			position: absolute;
			width: 400px;
			height: 400px;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(95, 184, 120, 0.1) 0%, rgba(255,255,255,0) 70%);
			bottom: -200px;
			left: -200px;
			z-index: 0;
			animation: float 10s ease-in-out infinite;
		}

		@keyframes float {
			0% { transform: translateY(0) rotate(0deg); }
			50% { transform: translateY(-20px) rotate(5deg); }
			100% { transform: translateY(0) rotate(0deg); }
		}

		.layui-form.layui-form-pane.lau-sign-form {
			display: flex;
			width: 1000px;
			border-radius: 15px;
			overflow: hidden;
			box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
			position: relative;
			z-index: 1;
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(8px);
			border: 1px solid rgba(255, 255, 255, 0.3);
		}

		.left-column {
			width: 500px;
			padding: 40px;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: linear-gradient(135deg, rgba(95, 184, 120, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
			position: relative;
			overflow: hidden;
		}

		.left-column::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
			background-size: cover;
			opacity: 0.15;
			z-index: -1;
			filter: grayscale(30%) blur(1px);
		}

		.right-column {
			width: 500px;
			padding: 60px 40px 40px; /* 顶部增加padding使内容下移 */
			background: rgba(255, 255, 255, 0.95);
		}

		.layui-form-item {
			margin-bottom: 20px; /* 统一间距 */
		}

		.layui-form-label {
			font-weight: 500;
			color: #5FB878;
			width: 100px;
			padding-left: 0;
			font-size: 16px;
			letter-spacing: 0.5px;
		}

		.layui-input-block {
			margin-left: 120px;
		}

		.layui-input {
			border-radius: 25px;
			border: 1px solid rgba(95, 184, 120, 0.3);
			padding: 10px 20px;
			box-shadow: 0 2px 10px rgba(95, 184, 120, 0.05);
			transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
			height: 48px;
			background: rgba(255, 255, 255, 0.8);
			font-size: 15px;
		}

		.layui-input:focus {
			border-color: #5FB878;
			box-shadow: 0 0 0 3px rgba(95, 184, 120, 0.2);
			background: rgba(255, 255, 255, 1);
		}

		.layui-btn.layui-btn-fluid {
			background: linear-gradient(135deg, #5FB878 0%, #4CAF50 100%);
			color: white;
			border-radius: 25px;
			font-size: 16px;
			height: 48px;
			line-height: 48px;
			width: 100%;
			transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
			border: none;
			box-shadow: 0 4px 15px rgba(95, 184, 120, 0.3);
			font-weight: 500;
			letter-spacing: 1px;
		}

		.layui-btn.layui-btn-fluid:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(95, 184, 120, 0.4);
		}

		.layui-btn.layui-btn-fluid:active {
			transform: translateY(1px);
		}

		.lau-sign-title {
			font-size: 32px; /* 减小字号确保一行显示 */
			font-weight: 700;
			color: #5FB878;
			margin-bottom: 20px;
			text-align: center;
			letter-spacing: 1px;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			position: relative;
			display: inline-block;
			white-space: nowrap; /* 确保不换行 */
		}

		.lau-sign-title::after {
			content: "";
			position: absolute;
			bottom: -10px;
			left: 50%;
			transform: translateX(-50%);
			width: 60px;
			height: 4px;
			background: #5FB878;
			border-radius: 3px;
		}

		.lau-sign-subtitle {
			font-size: 18px;
			color: rgba(95, 184, 120, 0.8);
			margin: 25px 0 30px;
			text-align: center;
			font-weight: 300;
			letter-spacing: 0.5px;
		}

		.layui-form-item.lau-sign-other {
			text-align: center;
			margin-top: 20px;
			padding-top: 20px;
			border-top: 1px solid rgba(95, 184, 120, 0.1);
		}

		.layui-form-item.lau-sign-other a {
			color: rgba(95, 184, 120, 0.7);
			margin: 0 15px;
			font-size: 16px;
			transition: all 0.3s;
			display: inline-block;
			cursor: pointer;
			font-weight: 400;
		}

		.layui-form-item.lau-sign-other a:hover {
			color: #5FB878;
			text-decoration: none;
			transform: translateY(-2px);
		}

		.layui-form-label i {
			margin-right: 8px;
			font-size: 18px;
			color: #5FB878;
		}

		.layui-form-radio {
			margin-right: 15px;
		}

		.layui-form-radio>i {
			color: #5FB878;
		}

		.layui-form-radioed>i {
			color: #5FB878;
		}

		.left-column img {
			width: 60%;
			height: auto;
			border-radius: 8px;
			margin-top: 20px;
			max-width: 250px;
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
			transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		}

		.left-column img:hover {
			transform: scale(1.05) rotate(2deg);
		}

		/* 响应式调整 */
		@media (max-width: 1000px) {
			.layui-form.layui-form-pane.lau-sign-form {
				flex-direction: column;
				width: 90%;
				max-width: 500px;
			}

			.left-column, .right-column {
				width: 100%;
			}

			.left-column {
				padding-bottom: 20px;
			}

			.right-column {
				width: 500px;
				padding: 40px; /* 统一padding */
				background: rgba(255, 255, 255, 0.95);
				display: flex;
				flex-direction: column;
				justify-content: center; /* 垂直居中内容 */
			}
		}
	</style>
	<script type="text/javascript" src="/Sys/js/jquery-3.3.1.min.js"></script>
	<script src="/Sys/lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="./js/xadmin.js"></script>
</head>
<body class="layui-unselect lau-sign-body">
<form action="www.baidu.com" class="layui-form" id="myForm">
	<div class="layui-form layui-form-pane lau-sign-form">
		<div class="left-column">
			<h1 class="lau-sign-title">简易学生成绩管理系统</h1>
			<p class="lau-sign-subtitle">by Xiaocccc</p>
			<img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Education">
		</div>
		<div class="right-column">
			<div class="layui-form-item">
				<label class="layui-form-label"><i class="iconfont layui-icon-extend-bianhao"></i>用户名</label>
				<div class="layui-input-block">
					<input type="text" name="num" placeholder="请输入用户名" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i>密码</label>
				<div class="layui-input-block">
					<input type="password" name="psw" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" id="myradio"><i class="iconfont layui-icon-extend-ziyuan"></i>身份</label>
				<div class="layui-input-block">
					<input type="radio" name="identify" value="0" title="管理员" lay-filter="iden" checked />
					<input type="radio" name="identify" value="1" title="教师" lay-filter="iden" />
					<input type="radio" name="identify" value="2" title="学生" lay-filter="iden" />
				</div>
			</div>
			<div class="layui-form-item" id="loginsub">
				<button type="button" class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登 录</button>
			</div>
			<div class="layui-form-item lau-sign-other">
				<a onclick="forgotPassword()" style="color: #5FB878;"><i class="layui-icon layui-icon-password"></i> 忘记密码</a>
			</div>
		</div>
	</div>
</form>
</body>
<script src="/Sys/js/layui.js"></script>
<script type="text/javascript">
	var idendata = "0"; // 默认选择管理员

	$(function() {
		layui.use(['form', 'layer'], function() {
			var form = layui.form;
			var layer = layui.layer;

			// 初始化表单
			form.render();

			// 监听提交
			form.on('submit(login)', function(data) {
				var loginjson = JSON.stringify(data.field);
				var logindata = JSON.parse(loginjson);
				var identify = logindata.identify;

				// 显示加载层
				var loadIndex = layer.load(1, {
					shade: [0.1, '#fff']
				});

				if (identify == 0 || identify == 1 || identify == 2) {
					$.ajax({
						url: "dealLogin",
						data: logindata,
						type: 'POST',
						success: function(data) {
							layer.close(loadIndex);
							if (data != "fail") {
								layer.msg("登录成功！", {
									icon: 1,
									time: 1000
								}, function() {
									if(identify == 0) {
										location.href = "adminIndex";
									} else if(identify == 1) {
										location.href = "teacherIndex";
									} else if(identify == 2) {
										location.href = "stuIndex";
									}
								});
							} else {
								layer.open({
									type: 4,
									content: ["账号或者密码或者身份不匹配", "#loginsub"],
									shade: 0,
									tips: [2, '#c00'],
									closeBtn: 0,
									time: 2000,
								});
							}
						},
						error: function() {
							layer.close(loadIndex);
							layer.msg("网络错误，请重试", {icon: 2});
						}
					});
				} else {
					layer.close(loadIndex);
					layer.open({
						type: 4,
						content: ["请选择身份", "#myradio"],
						shade: 0,
						tips: [4, '#91d'],
						closeBtn: 0,
						time: 2000,
					});
				}
				return false;
			});

			form.on('radio(iden)', function(data) {
				idendata = data.value;
			});
		});
	});

	// 忘记密码功能
	function forgotPassword() {
		layui.use(['layer', 'form'], function() {
			var layer = layui.layer;
			var form = layui.form;

			// 弹出忘记密码窗口
			layer.open({
				type: 1,
				title: '找回密码',
				skin: 'layui-layer-lan',
				area: ['400px', '350px'],
				content: '<div style="padding: 20px;">' +
						'<form class="layui-form">' +
						'<div class="layui-form-item">' +
						'<label class="layui-form-label">身份</label>' +
						'<div class="layui-input-block">' +
						'<select name="identity" lay-verify="required">' +
						'<option value="">请选择身份</option>' +
						'<option value="0">管理员</option>' +
						'<option value="1">教师</option>' +
						'<option value="2">学生</option>' +
						'</select>' +
						'</div>' +
						'</div>' +
						'<div class="layui-form-item">' +
						'<label class="layui-form-label">用户名</label>' +
						'<div class="layui-input-block">' +
						'<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">' +
						'</div>' +
						'</div>' +
						'<div class="layui-form-item">' +
						'<label class="layui-form-label">新密码</label>' +
						'<div class="layui-input-block">' +
						'<input type="password" name="newPassword" required lay-verify="required|pass" placeholder="请输入新密码" autocomplete="off" class="layui-input">' +
						'</div>' +
						'</div>' +
						'<div class="layui-form-item">' +
						'<label class="layui-form-label">确认密码</label>' +
						'<div class="layui-input-block">' +
						'<input type="password" name="confirmPassword" required lay-verify="required|confirmPass" placeholder="请再次输入新密码" autocomplete="off" class="layui-input">' +
						'</div>' +
						'</div>' +
						'<div class="layui-form-item">' +
						'<div class="layui-input-block">' +
						'<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="resetPassword">重置密码</button>' +
						'</div>' +
						'</div>' +
						'</form>' +
						'</div>',
				success: function(layero, index) {
					form.render();

					// 自定义验证规则
					form.verify({
						pass: [
							/^[\S]{6,12}$/,
							'密码必须6到12位，且不能出现空格'
						],
						confirmPass: function(value) {
							if($('input[name=newPassword]').val() !== value) {
								return '两次密码输入不一致';
							}
						}
					});

					// 监听提交
					form.on('submit(resetPassword)', function(data) {
						var loadIndex = layer.load(1, {shade: [0.1, '#fff']});

						// 检查是否是管理员
						if(data.field.identity === "0") {
							layer.close(loadIndex);
							layer.prompt({
								title: '请输入管理员安全密钥',
								formType: 1
							}, function(pass, index){
								layer.close(index);
								// 这里应该验证密钥，实际应用中应该从后端验证
								if(pass !== "admin123") { // 示例密钥，实际应用中应该更复杂
									layer.msg('安全密钥错误', {icon: 2});
									return;
								}
								// 验证通过，继续重置密码
								doResetPassword(data);
							});
							return false;
						} else {
							// 非管理员直接重置
							doResetPassword(data);
						}
						return false;
					});

					// 实际执行密码重置的函数
					function doResetPassword(data) {
						var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
						// 这里应该发送AJAX请求到后端处理密码重置
						// 模拟请求
						setTimeout(function() {
							layer.close(loadIndex);
							layer.msg('密码重置成功！', {icon: 1});
							layer.close(index);
						}, 1000);
					}
				}
			});
		});
	}
</script>
</html>